<template>
  <t-table
    :data="annotationStore.presentLabelList"
    :columns="computeColumns"
    size="small"
    row-key="id"
    bordered
    :pagination="pagination"
    :on-row-click="onRowClick"
  >
    <template #tagId="{ row }">
      <t-tag
        variant="light"
        :style="{
          background: preferenceStore.tagColor(row.tagId)?.colorValue,
        }"
      >
        {{ preferenceStore.tagColor(row.tagId)?.tagName }}
      </t-tag>
    </template>
    <template #action="{ row }">
      <t-popconfirm
        content="确定删除此条标注数据吗？"
        theme="warning"
        @confirm="onConfirmDeleteData(row.id)"
      >
        <t-button theme="danger" variant="text" size="small">
          <template #icon><delete-icon size="16px"></delete-icon></template>
        </t-button>
      </t-popconfirm>
    </template>
  </t-table>
</template>

<script setup lang="ts">
import { useAnnotationStore } from '@/stores/annotation'
import { usePreferenceStore } from '@/stores/preference'
import {
  PrimaryTableCol,
  Select,
  PrimaryTableOnEditedContext,
  TableRowData,
  MessagePlugin,
  Input,
  PageInfo,
  RowEventContext,
} from 'tdesign-vue-next'
import { DeleteIcon } from 'tdesign-icons-vue-next'
import { reactive, watch, computed } from 'vue'

interface Props {
  showCreatorName: boolean
  editable: boolean
  deletable: boolean
}

const props = defineProps<Props>()

const annotationStore = useAnnotationStore()
const preferenceStore = usePreferenceStore()

const onConfirmDeleteData = (id: string) => {
  annotationStore.removeLabel(id).then(() => {
    MessagePlugin.success('删除成功')
  })
}

const columns: PrimaryTableCol[] = [
  {
    colKey: 'content',
    title: '标注内容',
  },
  {
    colKey: 'tagId',
    title: '标签',
    edit: props.editable
      ? {
          component: Select,
          rules: [{ required: true, message: '标签不能为空' }],
          props: {
            size: 'small',
            options: annotationStore.tagList.map((t) => {
              return { label: t.tagName, value: t.id }
            }),
          },
          onEdited(context: PrimaryTableOnEditedContext<TableRowData>) {
            annotationStore
              .updateLabel(context.newRowData.id, {
                tagId: context.newRowData.tagId,
              })
              .then(() => {
                MessagePlugin.success('修改成功')
              })
          },
          abortEditOnEvent: ['onChange'],
        }
      : undefined,
  },
  {
    colKey: 'creatorName',
    title: '标注人',
  },
  {
    colKey: 'remark',
    title: '备注',
    edit: props.editable
      ? {
          component: Input,
          props: {
            size: 'small',
            clearable: true,
            placeholder: '',
          },
          onEdited(context: PrimaryTableOnEditedContext<TableRowData>) {
            annotationStore
              .updateLabel(context.newRowData.id, {
                remark: context.newRowData.remark,
              })
              .then(() => {
                MessagePlugin.success('修改成功')
              })
          },
          abortEditOnEvent: ['onEnter'],
        }
      : undefined,
  },
  {
    colKey: 'action',
    title: '操作',
    width: 50,
    align: 'center',
  },
]

const computeColumns = computed(() => {
  let c = columns
  if (!preferenceStore.showRemarkInDataTable) {
    c = c.filter((i) => i.colKey != 'remark')
  }
  if (!props.showCreatorName) {
    c = c.filter((i) => i.colKey != 'creatorName')
  }
  if (!props.deletable) {
    c = c.filter((i) => i.colKey != 'action')
  }
  return c
})
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: annotationStore.presentLabelList.length,
  onChange: (pageInfo: PageInfo) => {
    pagination.current = pageInfo.current
    pagination.pageSize = pageInfo.pageSize
  },
})
watch(
  () => annotationStore.presentLabelList,
  () => {
    pagination.total = annotationStore.presentLabelList.length
  },
  { deep: true }
)

const onRowClick = (context: RowEventContext<TableRowData>) => {
  annotationStore.scrollBookmark = context.row.bookmark
}
</script>

<style scoped></style>
